<!-- 班级体测项目进度 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" :rules="rules" ref="queryRef" :inline="true" label-width="68px">
	  
	  <el-form-item label="学校" prop="xxid">
	    <el-select v-model="queryParams.xxid" @change="schoolChange" placeholder="请选择学校" :disabled="isXxidFlag">
	      <el-option
	        v-for="d in dept_self"
	        :key="d.value"
	        :label="d.label"
	        :value="d.value"
	      />
	    </el-select>
	  </el-form-item>	
	  <el-form-item label="班级" prop="bjid">
	    <el-select v-model="queryParams.bjid" @change="classChange" placeholder="请选择班级" filterable>
	  	<el-option
	  	  v-for="c in classList2"
	  	  :key="c.value"
	  	  :label="c.label"
	  	  :value="c.value"
	  	/>
	    </el-select>
	  </el-form-item>
<!-- 	  <el-form-item label="" prop="njid" v-show="false">
			(<dict-tag :options="tc_nj" :value="queryParams.njid" />)
	  </el-form-item> -->
	  
	  <el-form-item label="年级" prop="njid" v-show="true">
	  			<!-- <dict-tag :options="tc_nj" :value="queryParams.njid" /> -->
	  	<el-select v-model="queryParams.njid" placeholder="请选择年级" disabled>
	        <el-option
	          v-for="dict in tc_nj"
	          :key="dict.value"
	          :label="dict.label"
	          :value="dict.value"
	        ></el-option>
	  	</el-select>
	  </el-form-item>
	  <el-form-item label="体测名称" prop="tcnameid">
	  		  <el-select v-model="queryParams.tcnameid" placeholder="体测名称" @change="handleQuery">
	  			<el-option
	  			  v-for="c in tcnameList"
	  			  :key="c.id"
	  			  :label="c.tcname"
	  			  :value="c.id"
	  			/>
	  		  </el-select>
	  </el-form-item>
<!-- 	  

	  <el-form-item label="评分标准" prop="tcxmfl" label-width="100">
	  	<el-select filterable v-model="queryParams.tcxmfl" @change="pfbzChange" placeholder="选择评分标准" clearable>
	  		<el-option value="" label="全部" ></el-option>
	  		<el-option
	  		  v-for="d in tctypeList"
	  		  :key="d.id"
	  		  :label="d.xmflTitle"
	  		  :value="d.id"
	  		/>
	  	</el-select>
	  </el-form-item>

	<el-form-item label="体测项目" prop="tcxmid">
	  		  <el-select v-model="queryParams.tcxmid" placeholder="体测项目"   @change="handleQuery" clearable>
	  			<el-option
	  			  v-for="c in projectList"
	  			  :key="c.id"
	  			  :label="c.xmMc"
	  			  :value="c.id"
	  			/>
	  		  </el-select>
	  </el-form-item> 
	  
	  
	  -->
	</el-form>
	<el-row>
        <!-- <el-button circle icon="Menu" @click="showColumn()" /> -->
	  <right-toolbar :myButtonShow="true" :myButtonText="'图表'" @myButtonClick="myButtonClick" :search="false" @queryTable="handleQuery" style="width: 200px;"></right-toolbar>
	</el-row>
<!-- 	
	<el-row style="justify-content: center;">
		<div id="main" style="width: 90%;min-height:500px;" v-show="showEcharts"></div>
	</el-row>
		<br>
	 -->	
	<el-row style="justify-content: center;">
		<el-text class="mx-1" size="large" style="font-weight: bold;margin-bottom: 10px;">{{getClassName(queryParams.bjid)}} - 学生体测项目进度</el-text>
	</el-row>
		<br>
	<el-table  :show-overflow-tooltip="true" v-loading="loading" :data="tcDataList">
	  <!-- <el-table-column type="selection" width="55" align="center" /> -->
	  <el-table-column type="index" label="序号" width="55" />
	  <!-- <el-table-column label="设备ID" align="center" prop="id" /> -->
	  <!-- :show-overflow-tooltip="true" -->
	  <!-- <el-table-column :show-overflow-tooltip="true" label="客户端ID" align="center" prop="sbClientid" /> -->
	  <el-table-column label="姓名" align="center" prop="xs_name" width="115">
		<template #default="scope">
			{{scope.row.xs_name + '('+(scope.row.xs_sex==0?'男':'女')+')'}}
		</template>
	  </el-table-column>
	  <template   v-for="c in projectList2"
	  			  :key="c.id"
	  			  :label="c.xmMc"
	  			  :value="c.id">
		  <el-table-column :label="c.xmMc" align="center" :prop="'pro'+c.id"  min-width="130" v-if="c.id==5 || c.id==9 || c.id==10">
				<template #default="scope">
					<!-- {{parseTime(scope.row.sj_tcsj,'{y}-{m}-{d} {h}:{i}')}} -->
					<el-tag type="info" v-if="scope.row['pro'+c.id]==0 || scope.row['pro'+c.id]==null">未测</el-tag>
					<el-tag type="" v-if="scope.row['pro'+c.id] !=null">{{scope.row['pro'+c.id].split("|")[1]}}分 ({{scope.row['pro'+c.id].split("|")[2]}})</el-tag><br>
					<el-text v-if="scope.row['pro'+c.id] !=null" size="small">{{ parseTime(scope.row['pro'+c.id].split("|")[4],'{y}-{m}-{d} {h}:{i}')}}</el-text>
				</template>
		  </el-table-column>
	  </template>
	  
<!-- 	  <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="300">
	    <template #default="scope">
	    </template>
	  </el-table-column> -->
	</el-table>

	
	
	
	
	
  </div>
	
</template>

<script setup name="Tcxmjd">
import { checkPermi, checkRole } from "@/utils/permission"; // 1. 导入权限判断函数
import * as echarts from 'echarts';
import useUserStore from "@/store/modules/user";
import { listDept } from "@/api/system/dept";
import { getStudentNumber} from "@/api/tc/student";
import { listClass} from "@/api/tc/class";
import { listTctype,getTctype} from "@/api/tc/tctype";
import { listProject} from "@/api/tc/project";
import { jgfx,getTcDataList,getTcJD_sList} from "@/api/tc/datafx";
import { listTcname} from "@/api/tc/tcname";
const { proxy } = getCurrentInstance();
const { tc_nj } = proxy.useDict('tc_nj');
const userStore = useUserStore();

const userinfo = reactive({
  token: userStore.token,
  id: userStore.id,
  name: userStore.name,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions
});	
const data = reactive({
  form: {},
  queryParams: {
    xxid: null,
    bjid: null,
    njid: null,
	tcxmfl:'',
	tcxmid:null
  },
  rules: {
	  xxid: [
	    { required: true, message: "学校不能为空", trigger: "change" }
	  ],
	  bjid: [
	    { required: true, message: "班级不能为空", trigger: "change" }
	  ]
	  
  }
});

const { queryParams, form, rules } = toRefs(data);
const isXxidFlag=ref(false);
const dept_self = ref([]);
const classList = ref([]);
const classList2 = ref([]);
const projectList = ref([]);
const projectList2 = ref([]);
const tctypeList = ref([]);
const tcDataList = ref([]);
const tcdata=ref({});
const countSum=ref(0);
const loading = ref(true);
const tmpProPar={pageNum: 1,pageSize: 999,xmStatus:'1'};
const tmpProTypePar={pageNum: 1,pageSize: 999,xmflStatus:'1'};
const tmpGetPar={pageNum: 1,pageSize: 999,tcxxid:userStore.user.deptId};
var myChart;
const myChartOption=ref(null);
const echartData=ref(null);
const showEcharts = ref(true);


const tcnameList = ref([]);


onMounted(() => {
	getTcnameList();
	// myChart = echarts.init(document.getElementById('main'));
	
 })
 
 /** 查询体测名称列表 */
 function getTcnameList() {
   // loading.value = true;
   listTcname(tmpGetPar).then(response => {
	   console.log(response)
    // loading.value = false;
    tcnameList.value = response.rows;
 	queryParams.value.tcnameid=tcnameList.value[0].id;
 	
 	getDeptInfo();
   });
 }
function getDeptInfo(){
		// console.log(userStore.user)
		if(checkRole(['admin','common'])){
			listDept({}).then(response => {
			  	response.data.forEach(function (element) {
			  	  // 遍历数组，对每个元素进行操作
				   if(element.xxlevel !=null && element.xxlevel != ''){
						dept_self.value.push({"value":element.deptId,"label":element.deptName});
				   }
			  	});
				queryParams.value.xxid=dept_self.value[0].value;
				getClassList(null);
			});
			isXxidFlag.value=false;
		}else{
			dept_self.value.push({"value":userStore.user.deptId,"label":userStore.user.dept.deptName});
			queryParams.value.xxid=dept_self.value[0].value;
			isXxidFlag.value=true;
			getClassList(queryParams.value.xxid);
		}
}

function getClassList(bjid){
	// if(checkRole(['admin','common'])){
	// 	bjid=null;;
	// }else{
	// 	bjid=userStore.user.deptId;
	// }
	listClass({"pageNum": 1,"pageSize": 500,"bjXxid" : bjid}).then(response => {
		response.rows.forEach(function (el) {
		  // 遍历数组，对每个元素进行操作
			classList.value.push({"value":el.id,"label":el.bjName,"xxid":el.bjXxid,"njid":el.bjNj});
		});
		if(classList.value.length > 0){
			queryParams.value.bjid=classList.value[0].value;
			queryParams.value.njid=classList.value[0].njid;
			getProjectList();
		}
	});
}


function getStudentNum(){
	getStudentNumber({"school": 200,"classj": 5}).then(response => {
		console.log(response)
	});
}

function getTcData(){
	let par={"xxid": queryParams.value.xxid,"bjid": queryParams.value.bjid,"njid":queryParams.value.njid,"tcnameid":queryParams.value.tcnameid};
	// console.log(par);
	if(queryParams.value.xxid=='' || queryParams.value.xxid==null || queryParams.value.bjid=='' || queryParams.value.bjid==null || queryParams.value.njid=='' || queryParams.value.njid==null){
		loading.value = false;
		return;
	}
	loading.value = true;
	getTcJD_sList(par).then(response => {
		// console.log(response)
		tcDataList.value=response.data
		loading.value = false;
		// loadEchartsData();
	}).catch(()=>{
		loading.value = false;
	});
}

/** 查询体测项目列表 */
function getProjectList() {
  // loading.value = true;
  listProject(tmpProPar).then(response => {
    projectList.value = response.rows;
    projectList2.value = response.rows;
	// projectList.value.push({"xmMc":"AAAA","id":999});
	// console.log(projectList.value)
	gettctypeList();
  });
}
function gettctypeList(){
  listTctype(tmpProTypePar).then(response => {
	// console.log(response)
    tctypeList.value = response.rows;
	// queryParams.value.tcxmfl=tctypeList.value[0].id;
	// showProject(tctypeList.value[0].id);
	schoolChange(classList.value[0].xxid)
	// tctypeProList(tctypeList.value[0].id)
  });
}
/* 
function tctypeProList(id){
  getTctype(id).then(response => {
	console.log(response.data.tcProjectTpList)
  });
}
 */
function showProject(e){
	if(e==null || e==''){
	  projectList2.value=projectList.value;
	}else{
	  projectList2.value=[];
	 tctypeList.value.forEach((item)=>{
		 if(item.id==e){
			// console.log(item.tcProjectTpList)
			item.tcProjectTpList.forEach((item2)=>{
				let a=projectList.value.filter(function(currentValue,index,arr){
					return currentValue.id == item2.projectid ;
				});
				projectList2.value.push(a[0])
				// console.log(item2)
				
			})
		 }
	 })
	}
}
function schoolChange(e){
	classList2.value= classList.value.filter(function(currentValue,index,arr){
		// console.log(currentValue)
		return currentValue.xxid == e ;
	});
	
	if(classList2.value.length==0){
		queryParams.value.bjid=null;
	}else{
		queryParams.value.bjid=classList2.value[0].value;
		queryParams.value.njid=classList.value[0].njid;
	}
	handleQuery();
}	
 function classChange(e){
	 // console.log("class"+e)
	let p= classList2.value.filter(function(currentValue,index,arr){
		// console.log(currentValue)
		return currentValue.value == e ;
	});
	 // console.log("class"+p)
	queryParams.value.njid=p[0].njid
	handleQuery();
 } 
 function pfbzChange(e){
	 showProject(e);
	 handleQuery();
 }
 function handleQuery(){
	//  // console.log(classList2.value)
	//  let tmp= classList2.value.filter(function(currentValue,index,arr){
	//  	// console.log(currentValue)
	//  	return currentValue.value == e ;
	//  });
	// queryParams.value.sjNjid=tmp[0].nj;
	// getJGFXList();
	getTcData();
	
 }
 const getDeptName=(id)=>{
 	for(let d of dept_self.value){
 		 if(id==d.value){
 			 return d.label;
 		 }
 	}
 }
 const getClassName=(id)=>{
 	for(let d of classList2.value){
 		 if(id==d.value){
 			 return d.label;
 		 }
 	}
 }
 /*-----图----*/
function myButtonClick(){
	showEcharts.value=showEcharts.value?false:true;
}

function loadEchartsData(){
	
	// console.log(myChartOption.value.series[0].data)
	myChartOption.value.yAxis.data=[]
	myChartOption.value.series[0].data=[]
	myChartOption.value.series[1].data=[]
	
	// console.log(tcDataList.value)
	projectList2.value.forEach((item=>{
		myChartOption.value.yAxis.data.push(item.xmMc);
		let count_nan=0,count_nv=0;
		tcDataList.value.forEach((item2=>{
			// <el-tag type="" v-if="scope.row['pro'+c.id] !=null">{{scope.row['pro'+c.id].split("|")[1]}}分 ({{scope.row['pro'+c.id].split("|")[2]}})</el-tag><br>
			if(item2['pro'+item.id]!=null){
				if(item2.xs_sex=="0")count_nan++;
				if(item2.xs_sex=="1")count_nv++;
			}
			
		}))
		myChartOption.value.series[0].data.push(count_nan);
		myChartOption.value.series[1].data.push(count_nv);
		// myChartOption.value.series[1].data.push(15);
	}))
	
	myChartOption.value.xAxis.max=tcDataList.value.length;
	myChartOption.value.title.text=getClassName(queryParams.value.bjid)+' 学生 - 体测项目进度';
	myChart.setOption(myChartOption.value);
}


const seriesLabel = {
  show: true,
  position: 'right',
  // formatter: '{a}-{b}-{c}'
  formatter: function(v){
	  let count=tcDataList.value.length;
	  let c=v.data;
	  let p=0;
	  if(c!=0 && count!=0){
		  p=(parseFloat(c/count)*100).toFixed(2);
		  // p=(parseFloat(1/7)*100).toFixed(2);
		  
	  }
	  return c+'人 ('+(p)+'%)'
  }
      
};
myChartOption.value = {
  title: {
    text: getDeptName(queryParams.value.xxid)+'学生 - 体测项目进度'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
	valueFormatter: (value) => value+'人',
	// formatter: '{b0}: {c0}<br />{b1}: {c1}'
    // formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    data: ['男', '女',]
  },
  grid: {
    left: 100
  },
  toolbox: {
    show: true,
    feature: {
      // saveAsImage: {}
    }
  },
  xAxis: {
    type: 'value',
    name: '人',
    axisLabel: {
      formatter: '{value}'
    }
  },
  yAxis: {
    type: 'category',
    // inverse: true,
    data: ['test1', 'test2', 'test3'],
    axisLabel: {
      formatter: function (value) {
        // return '{' + value + '| }\n{value|' + value + '}';
        return  value;
      },
	  // richText: true,
      margin: 20,
      rich: {
        value: {
          lineHeight: 30,
          align: 'center'
        },
        // test1: {
        //   height: 40,
        //   align: 'center',
        //   backgroundColor: {
        //     image: weatherIcons.Sunny
        //   }
        // },
        // test2: {
        //   height: 40,
        //   align: 'center',
        //   backgroundColor: {
        //     image: weatherIcons.Cloudy
        //   }
        // },
        // test3: {
        //   height: 40,
        //   align: 'center',
        //   backgroundColor: {
        //     image: weatherIcons.Showers
        //   }
        // }
      }
    }
  },
  series: [
    {
      name: '男',
      type: 'bar',
      data: [165, 170, 30],
      label: seriesLabel,
   //    markPoint: {
   //      symbolSize: 1,
   //      symbolOffset: [0, '50%'],
   //      label: {
   //        formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
   //        backgroundColor: 'rgb(242,242,242)',
   //        borderColor: '#aaa',
   //        borderWidth: 1,
   //        borderRadius: 4,
   //        padding: [4, 10],
   //        lineHeight: 26,
   //        // shadowBlur: 5,
   //        // shadowColor: '#000',
   //        // shadowOffsetX: 0,
   //        // shadowOffsetY: 1,
   //        position: 'right',
   //        distance: 20,
   //        rich: {
   //          a: {
   //            align: 'center',
   //            color: '#fff',
   //            fontSize: 18,
   //            textShadowBlur: 2,
   //            textShadowColor: '#000',
   //            textShadowOffsetX: 0,
   //            textShadowOffsetY: 1,
   //            textBorderColor: '#333',
   //            textBorderWidth: 2
   //          },
   //          b: {
   //            color: '#333'
   //          },
   //          c: {
   //            color: '#ff8811',
   //            textBorderColor: '#000',
   //            textBorderWidth: 1,
   //            fontSize: 22
   //          }
   //        }
   //      },
   //      data: [
   //        { type: 'max', name: 'max days: ',label:'aaa' },
   //        { type: 'min', name: 'min days: ' }
   //      ]
   //    },
	  
	  itemStyle: {
	  	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	  	  { offset: 0, color: '#83bff6' },
	  	  { offset: 0.5, color: '#188df0' },
	  	  { offset: 1, color: '#188df0' }
	  	])
	  },
	  emphasis: {
	  	itemStyle: {
	  	  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	  		{ offset: 0, color: '#2378f7' },
	  		{ offset: 0.7, color: '#2378f7' },
	  		{ offset: 1, color: '#83bff6' }
	  	  ])
	  	}
	  },
    },
    {
      name: '女',
      type: 'bar',
      label: seriesLabel,
      data: [150, 105, 110],
	  itemStyle: {
	  	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	  	  { offset: 0, color: '#999999' },
	  	  { offset: 0.5, color: '#ee2266' },
	  	  { offset: 1, color: '#ee6666' }
	  	])
	  },
	  emphasis: {
	  	itemStyle: {
	  	  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	  		{ offset: 0, color: '#ee6666' },
	  		{ offset: 0.7, color: '#ee2266' },
	  		{ offset: 1, color: '#999999' }
	  	  ])
	  	}
	  },
    },
  ]
};


</script>

<style>
</style>